<template>
    <view class="">
        <block v-if="scene == 1154">
            <pyq-open-chunk></pyq-open-chunk>
        </block>
        <block v-else>
            <view class="adviserPage bg-fff col-3e u-skeleton">
                <view class="detailItem cardBox bg boxShow">
                    <view class="cardBoxBase">
                        <view class="cardTop u-skeleton-fillet">
                            <view class="userMsgBox flex">
                                <view class="userHeadBox bg-fff flex boxShow">
                                    <image :src="detail.avatar_url[0].url" class="userHead u-skeleton-circle"></image>
                                </view>
                                <view class="msg">
                                    <view class="name font14 fontBold flex">{{detail.name}} <image class="iconMedal" src="https://image.srea.org.cn/xcx/medal-gold.png" mode="widthFix"></image></view>
                                    <!-- #ifdef MP-WEIXIN -->
                                    <view class="msgItem font12 txtHidden" @click="addwx(detail.wx_id)"><text class="labelTit">微信号：</text>{{detail.wx_id}}</view>
                                    <!-- #endif -->
                                    <view class="msgItem font12" @click="callBtn(detail.phone)"><text class="labelTit">手机号：</text>{{phoneStr}}</view>
                                </view>
                                <view class="contactBox flex" v-if="userInfo.id != detail.user_id">
                                    <button class="btn bg-fff boxShow flex" @click="callBtn(detail.phone)">
                                        <view class="iconBox flex"><u-icon name="phone-fill" color="#FAA000" size="22"></u-icon></view>
                                        拨打电话
                                    </button>
                                </view>
                            </view>
                        </view>
                        <view class="houseNameBox flex" v-if="productList.length == 1">
                            <view class="houseName bg txtHidden">{{productList[0].title}}</view>
                        </view>
                        <view class="cardBottom flex">
                            <view class="itemBtn flex u-skeleton-fillet">
                                {{(detail.view_num>10000)?(detail.view_num/1000) + 'W+':detail.view_num}}浏览量
                            </view>
                            <view class="itemBtn flex u-skeleton-fillet">
                                {{detail.like_num>10000?(detail.like_num/10000)+'W+':detail.like_num}}点赞数
                            </view>
                        </view>
                    </view>
                </view>
                <view class="serviceItem">
                    <view class="btnsBox flex">
                        <button class="btnItem clearBtn flex" @click="thumbBtn">
                            <view class="btn flex u-skeleton-fillet">
                                <u-icon name="thumb-up-fill" :color="thumbFlag?'#007235':'#3E3A3A'" size="20"></u-icon>
                            </view>
                            <text>为我点赞</text>
                        </button>
                        
                        <!-- #ifdef MP-WEIXIN || MP-BAIDU -->
                        <button class="btnItem clearBtn flex" @click="saveQrcode">
                            <view class="btn flex u-skeleton-fillet">
                                <u-icon name="photo-fill" color="#3E3A3A" size="20"></u-icon>
                            </view>
                            <text>保存二维码</text>
                        </button>
                        <!-- #endif -->
                        
                        <view class="btnItem">
                            <button type="default" open-type="share" class="shareBtn flex">
                                <view class="btn flex u-skeleton-fillet">
                                    <u-icon name="zhuanfa" color="#3E3A3A" size="40"></u-icon>
                                </view>
                                <text class="font14">转发分享</text>
                            </button>
                        </view>
                    </view>
                    <view class="zixunItem flex">
                        <text class="zixunTit u-skeleton-fillet">免费咨询</text>
                        <text class="zixunTit u-skeleton-fillet">免费电话</text>
                        <text class="zixunTit u-skeleton-fillet">专业解答</text>
                    </view>
                </view>
                
                <view class="detailItem boxShow u-skeleton-fillet">
                    <card title="TA的主营楼盘">
                        <view class="prodList">
                            <block v-for="prod in productList" :key="prod.id">
                                <view class="prodItem top-20">
                                    <product-item :product="prod" :adviserUId="puid"></product-item>
                                    <view class="houseBtns flex col-4d font10 fontBold">
                                        <block v-for="(item,index) in houseNavList" :key="index">
                                            <view class="item flex" @click="toHouseItem(prod, item)">
                                                <image class="itemImg" :src="item.imgUrl" mode="widthFix"></image>
                                                {{item.title}}
                                            </view>
                                        </block>
                                    </view>
                                </view>
                            </block>
                        </view>
                    </card>
                </view>
                
                <!-- <view class="detailItem boxShow u-skeleton-fillet" v-if="commentList.length > 0">
                    <card title="TA的问答">
                        <block v-for="(comm,index) in commentList" :key="index">
                            <view class="commentItem">
                                <comment-item :detail="comm" :question="true" @bindComment="bindCommentQuestion" @bindThumb="bindThumb"></comment-item>
                                <view class="commentChild" v-if="comm.reply_info.length > 0">
                                    <block v-for="child in comm.reply_info" :key="child.id">
                                        <view class="child">
                                            <comment-item :detail="child" @bindComment="bindDetail"></comment-item>
                                        </view>
                                    </block>
                                </view>
                            </view>
                        </block>
                    </card>
                </view> -->
            </view>
        </block>
        <up-modal :show="showPrivacy" title="用户隐私保护提示" :showCloseBtn="false" :showConfirmButton="false" :closeOnClickOverlay="true" @close="showPrivacy = false" @confirm="showPrivacy = false">
            <privacy-authorize @close="closePrivacyModal"></privacy-authorize>
        </up-modal>
    </view>
</template>
<script>
    import { mapState, mapActions } from 'pinia';
    import { useIndexStore, useUserInfoStore, useConfigStore } from '@/store/index';
    import { checkWXPrivacyAuthorize, checkLogin, checkUserInfo, isBoolean } from '@/common/common';
	import { adviserDetailAPI, adviserThumb, adviserHistoryAPI } from '@/common/api';
    // import { userCallAdviser, dispatchClient } from '@/common/api-adviser';

	export default {
		data() {
			return {
                adviserId: '',
                detail: {},
                productList: [],
                houseNavList: [{
                    title: '户型图',
                    imgUrl: 'https://image.srea.org.cn/xcx/icon/icon-house-type-btn.png',
                    url: '/pages/house/type-list',
                },{
                    title: '楼盘动态',
                    imgUrl: 'https://image.srea.org.cn/xcx/icon/icon-house-dynamic-btn.png',
                    url: '/pages/house/dynamic-list',
                },{
                    title: '楼盘详情',
                    imgUrl: 'https://image.srea.org.cn/xcx/icon/icon-house-detail-btn.png',
                    url: '/pages/house/detail-message',
                },{
                    title: '周边配套',
                    imgUrl: 'https://image.srea.org.cn/xcx/icon/icon-house-nearby-btn.png',
                    url: '/pages/houses/map/map-nearby',
                },{
                    title: '楼盘相册',
                    imgUrl: 'https://image.srea.org.cn/xcx/icon/icon-house-photo-btn.png',
                    url: '/pages/house/album',
                }],
                commentList: [],
                thumbFlag: false,
                productId: '',
                title: '',
                share: false,
                start_time: 0,
                loading: true,
                showPrivacy: false
            }
		},
        computed:{
            ...mapState(useConfigStore, ['scene', 'puid']),
            ...mapState(useUserInfoStore, ['userInfo']),
            phoneStr: function() {
                return this.detail.phone?`${this.detail.phone.substr(0,4)}...${this.detail.phone.substr(-3)}`:''
            }
        },
        onShareAppMessage() {
            return {
                title: `我是【${this.productList.length > 1 ? '':this.productList[0].title}】置业顾问，联系我了解更多楼盘信息`,
                path: `/pages/my/adviser/detail?adviserId=${this.adviserId}&productId=${this.productList[0].id}&puid=${this.userInfo.id}&title=${this.productList[0].title}&share=true&prepage=置业顾问详情页-${this.adviserId}`,
            }
        },
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `我是【${this.productList.length > 1 ? '':this.productList[0].title}】置业顾问，联系我了解更多楼盘信息`,
                query: `adviserId=${this.adviserId}&productId=${this.productList[0].id}&puid=${this.userInfo.id}&title=${this.productList[0].title}&share=true&prepage=置业顾问详情页-${this.adviserId}`
            }
        },
        //#endif

        onAddToFavorites() {
            return {
                title: `我是【${this.productList.length > 1 ? '':this.productList[0].title}】置业顾问，联系我了解更多楼盘信息`,
                query: `adviserId=${this.adviserId}&productId=${this.productList[0].id}&puid=${this.userInfo.id}&title=${this.productList[0].title}&share=true&prepage=置业顾问详情页-${this.adviserId}`
            }
        },

		onLoad(options){
            const that = this;
			let { adviserId='', id='', puid='', productId='', share=false, title='' } = options;
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            this.adviserId = id?id:adviserId;
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.share = isBoolean(share);
            this.title = title&&title!=='undefined'?title:'';
            this.start_time = (new Date()).getTime();

            uni.$check_and_login(function () {
                //绑定客户
                // dispatchClient({
                //     share: that.share,
                //     puid: puid,
                //     pid: that.productId
                // });
                that.init()
            })
		},
        
		methods: {
            ...mapActions(['setPuid']),
			init(){
                try {
                    adviserHistoryAPI(this.adviserId).then(res => {});
                } catch(err){
                    
                }
                adviserDetailAPI(this.adviserId).then(res => {
                    if(res.status == 0) {
                        let { product, seller, comment, love, self } = res.detail;
                        this.detail = seller;
                        this.productList = product;
                        this.commentList = comment.map(item => {
                            item.create_time = Date.parse(item.create_time);
                            if(item.reply_info.length > 0) {
                                item.reply_info.forEach(child => {
                                    child.create_time = Date.parse(child.create_time)
                                })
                            }
                            return item
                        });
                        this.thumbFlag = love;
                        this.loading = false;
                    }else{
                        this.loading = false;
                        uni.$u.toast(res.detail);
                    }
                }).catch(err => {
                    this.loading = false;
                })
            },

            //关闭隐私政策模态框
            closePrivacyModal() {
                this.showPrivacy = false;
            },
            
            //保存二维码
            async saveQrcode(){
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: `/pages/login/login?adviserId=${this.adviserId}&productId=${this.productList[0].id}`
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }
                let privacyRes = await checkWXPrivacyAuthorize();
                if(privacyRes) {
                    this.showPrivacy = true;
                    return
                }
                const that = this;
                uni.downloadFile({
                    url: that.detail.wx_qrcode[0].url,
                    success: (res) => {
                        // userCallAdviser({
                        //     type: 2,
                        //     id: that.detail.id,
                        //     pid: that.productList[0].id
                        // }).then(res => {
                        // })
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: function () {
                                uni.showToast({
                                    title: "保存相册成功"
                                })
                            }
                        });
                    }
                })
            },
              
            //跳转户型图、动态等
            toHouseItem(prod, info){
                uni.navigateTo({
                    url: `${info.url}?productId=${prod.id}&title=${prod.title}&lat=${prod.lat}&lng=${prod.lng}&puid=${this.puid}`
                })
            },
            
            // bindCommentQuestion(info){
            //     uni.navigateTo({
            //         url: `/pages/houses/comments/comment-detail?focus=${false}&id=${info.id}&userName=${info.user_nick}&productId=${info.product}&puid=${this.puid}`
            //     })
            // },
            
            //点赞置业顾问
            thumbBtn(){
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: `/pages/login/login?adviserId=${this.adviserId}&productId=${this.productList[0].id}`
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }
                adviserThumb(this.adviserId).then(res => {
                    if(this.thumbFlag) {
                        this.detail.like_num--
                    }else{
                        this.detail.like_num++
                    }
                    this.thumbFlag = !this.thumbFlag;
                })
            },
            
            //点赞评论
            bindThumb(id){
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: `/pages/login/login?adviserId=${this.adviserId}&productId=${this.productList[0].id}`
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }
                this.commentList.forEach(item => {
                    if(item.id == id) {
                        if(item.love) {
                            item.like_num--
                        }else {
                            item.like_num++
                        }
                        item.love = !item.love
                    }
                })
            },
              
            //评论
            // bindDetail(info){
            //     uni.navigateTo({
            //         url: `/pages/houses/comments/comment-detail?focus=${false}&id=${info.root_id}&userName=${info.user_nick}&productId=${this.productList[0].id}&puid=${this.puid}`
            //     })
            // },
            
            //打电话
            callBtn(){
                const that = this;
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: `/pages/login/login?adviserId=${this.adviserId}&productId=${this.productList[0].id}`
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }
                uni.makePhoneCall({
                    phoneNumber: that.detail.phone,
                    success() {
                        // userCallAdviser({
                        //     type: 0,
                        //     id: that.detail.id,
                        //     pid: that.productList[0].id
                        // }).then(res => {
                        // })
                    }
                })
            },
            
            //添加微信
            addwx(){
                  const that = this;
                  if(!checkLogin()) {
                      uni.navigateTo({
                          url: `/pages/login/login?adviserId=${this.adviserId}&productId=${this.productList[0].id}`
                      })
                      return
                  }
                  if(!checkUserInfo()) {
                      uni.navigateTo({
                          url: `/pages/login/user-info-form`
                      })
                      return
                  }
                  uni.setClipboardData({
                      data: that.detail.wx_id,
                      success: function () {
                        //   userCallAdviser({
                        //       type: 1,
                        //       id: that.detail.id,
                        //       pid: that.productList[0].id
                        //   }).then(res => {
                        //   })
                          uni.hideToast();
                          uni.showModal({
                              title: "小技巧",
                              confirmColor: "#007235",
                              content: '微信号已复制',
                              success: function (res) {
                              }
                          })
                      }
                  });
            }
		}
	}
</script>

<style lang="scss" scoped>
	.adviserPage{
        min-height: 100vh;
        padding-bottom: 150rpx;
        overflow: hidden;
        line-height: 1;
        position: relative;
        .cardBox{
            background-image: url("https://image.srea.org.cn/xcx/adviser-card-bg.png");
            .cardTop{
                margin: 40rpx 30rpx 0rpx 30rpx;
            }
            .userMsgBox{
                justify-content: flex-start;
                .userHeadBox{
                    width: 128rpx;
                    height: 128rpx;
                    border-radius: 50%;
                    .userHead{
                        width: 120rpx;
                        height: 120rpx;
                        border-radius: 50%;
                    }
                }
                .msg{
                    margin-left: 50rpx;
                    width: calc(100% - 368rpx);
                    .name{
                        justify-content: flex-start;
                        margin-top: 15rpx;
                        .iconMedal{
                            width: 36rpx;
                            margin-left: 10rpx;
                        }
                    }
                    .msgItem{
                        position: relative;
                        margin-top: 15rpx;
                        line-height: 1.5;
                    }
                }
                .contactBox{
                    width: 180rpx;
                    height: 120rpx;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: space-between;
                    .btn{
                        height: 50rpx;
                        line-height: 50rpx;
                        border-radius: 25rpx;
                        padding: 0rpx 20rpx;
                        font-size: 24rpx;
                        &::after {
                            border: none;
                            padding: 0;
                            margin: 0;
                        }
                        .iconBox{
                            margin-right: 10rpx;
                        }
                    }
                }
            }
            .houseNameBox{
                justify-content: flex-start;
                border-bottom: 1rpx solid rgba(0,0,0,.03);
                .houseName{
                    max-width: 90%;
                    padding: 10rpx 30rpx;
                    background-image: url("https://image.srea.org.cn/xcx/icon/adviser-house-bg.png");
                    background-size: 100% 100%;
                }
            }
            .cardBottom{
                justify-content: space-between;
                margin: 40rpx 0rpx 60rpx 0rpx;
                .itemBtn{
                    flex: 1;
                    border-right: 1rpx solid rgba(0,0,0,.2);
                    &:last-child{
                        border: none;
                    }
                }
            }
        }
        .detailItem{
            overflow: hidden;
            margin: 35rpx 30rpx 0rpx 30rpx;
            border-radius: 20rpx;
            background-color: #FFFFFF;
            .commentItem{
                padding: 30rpx 0rpx;
                border-bottom: 1rpx solid rgba(0,0,0,.04);
                &:last-child{
                    border: none;
                }
                .commentChild{
                    margin-top: 20rpx;
                    margin-left: 80rpx;
                    .child{
                        padding: 20rpx 0rpx;
                    }
                }
            }
        }
        .prodList{
            .prodItem{
                border-bottom: 1rpx solid rgba(0,0,0,.03);
            }
        }
        .serviceItem{
            padding: 40rpx 0rpx 20rpx 0rpx;
        }
        .zixunItem{
            margin-top: 40rpx;
            background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,.07), rgba(255,255,255,.0));
            padding: 10rpx 0rpx;
            .zixunTit{
                width: 22%;
                letter-spacing: 10rpx;
                text-align: center;
                font-size: 22rpx;
                position: relative;
                &:nth-child(2){
                    &::before{
                        content: "";
                        position: absolute;
                        top: 11rpx;
                        left: 0;
                        display: inline-block;
                        width: 4rpx;
                        height: 4rpx;
                        border-radius: 50%;
                        background-color: #333333;
                    }
                    &::after{
                        content: "";
                        position: absolute;
                        top: 11rpx;
                        right: 0;
                        display: inline-block;
                        width: 4rpx;
                        height: 4rpx;
                        border-radius: 50%;
                        background-color: #333333;
                    }
                }
            }
        }
        .houseBtns{
            padding: 30rpx 0rpx;
            .item{
                flex: 1;
                flex-direction: column;
                .itemImg{
                    width: 60rpx;
                    margin-bottom: 20rpx;
                }
            }
        }
        .btnsBox{
            .btnItem{
                flex: 1;
                flex-direction: column;
                font-size: 28rpx;
                .shareBtn{
                    flex-direction: column;
                    background: none;
                    line-height: 1;
                    &::after{
                        border: none;
                    }
                }
                .btn{
                    width: 76rpx;
                    height: 76rpx;
                    border-radius: 50%;
                    background-color: rgba(0,0,0,.05);
                    margin-bottom: 23rpx;
                }
            }
        }
    }
</style>
